<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>服务器维护</title>
    <script src="../trd/jquery/jquery-2.0.2.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../trd/element/element.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="../../css/base.css">
    <script type="text/javascript" src="../trd/vue/vue.js"></script>
    <script type="text/javascript" src="../trd/element/element.js"></script>
    <style>
        .cell {
            padding-right: 0px !important;
        }

    </style>
</head>

<body style="background-color: rgb(255, 255, 255); box-sizing: border-box; color: rgb(51, 51, 51); display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
    <div  id="app" style="margin:0px 15px;height: 100%" v-cloak>
        <el-row style="line-height: 50px">
            <el-col :span="24">
                <el-button size="small" type="success" @click="add">新增</el-button>
                <el-button size="small"  type="success">修改</el-button>
                <el-button size="small"  type="danger" @click="del">删除</el-button>
            </el-col>
        </el-row>
        <el-divider content-position="left"></el-divider>
        <el-row>
                <el-table  :header-row-class-name="'table-header'" :row-class-name="'table-row'" border
                        :data="serverInfoList"
                        ref="selectedRow"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="serverName"
                            label="服务器名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="hostId"
                            label="主机名"
                            width="180">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.hostId" placeholder="请选择" :disabled="true">
                                <el-option
                                        v-for="item in hostInfoList"
                                        :key="item.id"
                                        :label="item.userName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    </el-table-column>
                    <el-table-column
                            prop="mark"
                            label="备注"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="最后修改时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button @click="deploy(scope.$index, scope.row)" >部署</el-button>
                            <el-button @click="fix(scope.$index, scope.row)">修改</el-button>
                           <!-- <el-button @click="del(scope.$index, scope.row)">删除</el-button>-->
                            <el-button @click="query(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </template>
        </el-row>
        <el-dialog
                :title="dialogName"
                :visible.sync="dialogVisible"
                width="80%"
                >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="服务器名称" prop="serverName">
                            <el-input v-model="ruleForm.serverName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="主机" prop="hostId">
                            <el-select v-model="ruleForm.hostId" placeholder="请选择主机">
                                <el-option
                                        :value="item.id" :label="item.hostName"
                                        v-for="item in hostInfoList"
                                        :key="item.id"
                                        @change="change"
                                        >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注" prop="mark">
                            <el-input v-model="ruleForm.mark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="超时时间" prop="timeOut">
                            <el-input v-model="ruleForm.timeOut"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="本地前置脚本" prop="beforeCmdLocal">
                            <el-input v-model="ruleForm.beforeCmdLocal"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="远程前置脚本" prop="beforeCmdRemote">
                            <el-input v-model="ruleForm.beforeCmdRemote"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="本地后置脚本" prop="afterCmdLocal">
                            <el-input v-model="ruleForm.afterCmdLocal"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="远程后置脚本" prop="afterCmdRemote">
                            <el-input v-model="ruleForm.afterCmdRemote"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="本地文件地址" prop="fileId">
                            <el-select :value="ruleForm.fileName"  placeholder="请选择部署文件"  ref="selectFile">
                                <el-option :value="ruleForm.fileId" :label="ruleForm.fileName" style="height:200px;overflow: auto;background-color:#fff">
                                    <el-tree
                                            :data="fileTree"
                                            :props="defaultProps"
                                            @node-click="handleNodeClick"
                                    ></el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="远程文件地址" prop="fileRemoteAddr">
                            <el-input v-model="ruleForm.fileRemoteAddr"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="resetForm('ruleForm')">重 置</el-button>
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" v-if="openDialogType!=3" type="primary" @click="submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
    </div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            openDialogType:1,
            serverInfoList: [],
            hostInfoList:[],
            selectedRow:[],
            dialogName:"",
            dialogVisible:false,
            fileTree:[],
            defaultProps:{
                children: 'fileDos',
                label: 'fileName',
                disabled:'disabled',
            },
            ruleForm:{
                id:'',
                createTime:'',
                serverName:'',
                hostId:'',
                mark:'',
                timeOut:'',
                beforeCmdLocal:'',
                beforeCmdRemote:'',
                afterCmdLocal:'',
                afterCmdRemote:'',
                fileLocalAddr:'',
                fileRemoteAddr:'',
            },
            rules: {
                serverName: [
                    { required: true, message: '主机名称', trigger: 'blur' },
                    { min: 5, max: 60, message: '长度在 5 到 60 个字符', trigger: 'blur' }
                ],
                hostId: [
                    { required: true, message: '请选择部署主机', trigger: 'blur' },
                ],
                timeOut: [
                    { required: true, message: '请输入超时时间', trigger: 'blur' },
                ],
                fileLocalAddr: [
                    { required: true, message: '请输入文件本地地址（包括文件名称）', trigger: 'blur' },
                    { min: 0, max: 128, message: '长度在 0 到 128 个字符', trigger: 'blur' }
                ],
                fileRemoteAddr: [
                    { required: true, message: '请输入文件远程地址（包括文件名称）', trigger: 'blur' },
                    { min: 0, max: 128, message: '长度在 0 到 128 个字符', trigger: 'blur' }
                ],
            }

        },
        mounted:function(){
            var that = this;
            this.$nextTick(function (){that.queryServerList()});
            /**
             * 获取所有主机
             */
            $.getJSON("/hostController/getHostInfoList", function(json){
                if(json.status==200){
                    that.hostInfoList=json.data;
                }else {
                    that.$message(json.msg);
                }
            });
            /**
             * 获取文件树信息
             */
            $.getJSON("/fileController/getFileLbAndFileInfoList", function(json){
                if(json.status==200){
                    that.fileTree=json.data;
                }else {
                    that.$message(json.msg);
                }
            });
        },
        created:function(){

        },
        methods: {
            change:function(e){
                this.ruleForm.hostName = e.hostName;
                this.ruleForm.hostId = e.id;
            },
            handleNodeClick:function(data,node,tree){
                if(data.disabled){
                    return;
                }
                this.ruleForm.fileName=data.fileName;
                this.ruleForm.fileId=data.fileId;
                this.$refs.selectFile.blur()
                console.log(data)
            },
            deploy:function(index,row) {
                row.running=false;
                var that = this;
                $.ajax({
                    type: "post",
                    url: "/deployController/develop",
                    dataType: "json",
                    data:{"id":row.id},
                    success: function(msg){
                        console.log(msg)
                        that.$message(msg.info);
                        row.running=true;
                    }
                });
            },
            add:function(){

                this.openDialogType=1
                this.resetForm('ruleForm')
                this.showDialog("新增")
            },
            fix:function(index,row){
                this.openDialogType=2
                this.resetForm('ruleForm')
                this.showDialog("修改",row)
            },
            del:function(index,row){
                var that = this
                if(this.$refs.selectedRow.selection.length==0){
                    that.$message("请选择要删除的数据！");
                    return
                }
                var rows = this.$refs.selectedRow.selection;
                var ids = []
                rows.forEach(function (item, idnex, array) {
                    ids.push(item.id)
                })

                $.ajax({
                    url : "/deployController/delServer",
                    async : false,
                    type : "get",
                    contentType : 'application/json',
                    dataType : 'json',
                    data :{ids:ids.join(",")},
                    success : function(data) {
                        that.$message(data.msg);
                        that.queryServerList()
                    }
                });
            },
            queryServerList:function(){
                var that = this
                $.getJSON("/deployController/getServerInfoList", function(json){
                    if(json.status==200){
                        that.serverInfoList=json.data;
                    }else {
                        that.$message(json.msg);
                    }
                });
            },
            query:function(index,row){

                this.openDialogType=3
                this.resetForm('ruleForm')
                this.showDialog("查看",row)
            },
            showDialog:function (dialogName,row){
                this.dialogVisible=true
                this.dialogName = dialogName;
                if(row){
                    var tmp = {}
                    $.extend(true,tmp,row);
                    this.ruleForm = tmp;
                    if(this.ruleForm.fileDo){
                        this.ruleForm.fileName = this.ruleForm.fileDo.fileName
                    }
                }
            },
            submitForm(formName) {
                var that = this;
                var url_ = "";
                if(this.openDialogType==1){
                    url_ = "/deployController/addServer"
                }
                if(this.openDialogType==2){
                    url_ = "/deployController/fixServer"
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url : url_,
                            async : false,
                            type : "POST",
                            contentType : 'application/json',
                            dataType : 'json',
                            data :JSON.stringify(that.ruleForm),
                            success : function(data) {
                                that.$message(data.msg);
                                if(data.status==200){
                                    that.dialogVisible=false
                                    that.queryServerList();
                                }

                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                var that = this;
                this.$nextTick(()=>{
                    if(this.openDialogType==1){
                        that.ruleForm={
                            id:'',
                            createTime:'',
                            serverName:'',
                            hostId:'',
                            hostDo:{},
                            mark:'',
                            timeOut:'',
                            beforeCmdLocal:'',
                            beforeCmdRemote:'',
                            afterCmdLocal:'',
                            afterCmdRemote:'',
                            fileId:'',
                            fileDo: {},
                            fileRemoteAddr:'',
                        }
                    }

                })

            }
        }
    })
</script>

</html>
